<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>用户中心</p>
        </header>
        <!--用户信息部分-->
        <div class="user-info">
            <div class="user-info-left">
                <img :src="user.userImg ? user.userImg : require('../assets/userImg/yhtx01.png')" alt="用户头像">
            </div> 
            <div class="user-info-right">
                <p>{{ user.userName }}</p>
                <p>{{ maskedPhoneNumber }}</p>
            </div>
            <div class="button-manage" >
                <button @click="toAccountManagement()">账户管理</button>
            </div>
        </div>
        <!--用户钱包部分-->
        <ul class="user-pay">
            <li @click="toUserScore()">
                <i class="fa fa-star"></i>
                <p>我的积分</p>
            </li>
            <li @click="toUserCouponPackage()">
                <i class="fa fa-ticket"></i>
                <p>我的券包</p>
            </li>
            <li @click="toUserVip()">
                <i class="fa fa-diamond"></i>
                <p>会员中心</p>
            </li>
        </ul>
        <!--其他功能部分-->
        <ul class="other-element">
            <li @click="toUserAddress()">
                <i class="fa fa-map-marker"></i>
                <p>我的地址</p>
            </li>
            <li @click="toUserCart()">
                <i class="fa fa-shopping-cart"></i>
                <p>我的购物车</p>
            </li>
            <li @click="openUserPrivacyDocumentation()">
                <i class="fa fa-user-secret"></i>
                <p>用户隐私</p>
            </li>
            <li  @click="openRuleCenterDocumentation()">
                <i class="fa fa-cogs"></i>
                <p>规则中心</p>
            </li>
        </ul>
        <!--互动玩乐部分-->
        <div class="play-element">
        </div>
        <!-- 底部菜单部分 -->
        <footer-page></footer-page>
    </div>
</template>

<script>
import FooterPage from '../components/FooterPage.vue';
export default{
    name:'UserCenter',
    data(){
        return{
            user: {
                    userId:'',
                    userImg:'',
                    userName:''
                }
        }   
    },
    created(){
        this.user = this.$getSessionStorage('user');
    },
    components:{
        FooterPage
    },
    methods :{
        toUserScore(){
            this.$router.push({path:'/userScore'});
        },
        toUserCouponPackage(){
            this.$router.push({path:'/userCouponPackage'});
        },
        toUserVip(){
            this.$router.push({path:'/userVip'});
        },
        toUserAddress(){
            this.$router.push({path:'/userAddress'});
        },
        toUserCart(){
            this.$router.push({path:'/userCart'});
        },
        openUserPrivacyDocumentation(){
            window.location.href = 'https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other201903051859_43484.html';
        },
        openRuleCenterDocumentation(){
            window.location.href = 'https://r.ele.me/alsc-risk-rule-center-fe#/';
        },
        toAccountManagement(){
            this.$router.push({path:'/accountManagement'});
        },

    },
    computed: {
        //使用过滤器使得中间四个号码打上星号
        maskedPhoneNumber() {
            return this.user.userId.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        }
    }
}
</script>


<style scoped>
/****************** 总容器 ******************/
.wrapper {
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    /* 固定定位 */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

/************用户信息部分***********/
.wrapper .user-info{
    width: 100%;
    margin-top: 12vw;
    display: flex; /* 使用Flexbox布局 */
    align-items: center;
}
.wrapper .user-info .user-info-left{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .user-info .user-info-left img{
    border-radius: 50%;
    height: 16vw;
    margin-top:5vw ;
    margin-left: 5vw; /* 设置图片与边框之间的左侧距离 */
    border: 4px solid #fff; /* 设置白色边框样式和颜色 */
}
.wrapper .user-info .user-info-right{
    margin-left: 7vw;
    margin-top:5vw ;
}
.wrapper .user-info .user-info-right p:first-child{
    font-size: 5vw; /* 设置字体大小 */
    font-weight: 400;
    color: #666; /* 设置文字颜色 */
    border-radius: 10px;
}
.wrapper .user-info .user-info-right p:last-child{
    font-size: 5vw; /* 设置字体大小 */
    font-weight: 400;
    color: #666; /* 设置文字颜色 */
    margin: 1vw auto 0;
    border-radius: 10px;
}
.wrapper .user-info .button-manage{
    position: fixed;
    top: 18vw; /* 距离顶部的距离 */
    right: 8vw; /* 距离右侧的距离 */
}
.wrapper .user-info .button-manage button{
    width: 100%;
    height: 8vw;

    font-size: 4vw;
    font-weight: 400;

    color: #fff;
    background-color: #0097FF;

    border-radius: 10px;

    border: none;
    outline: none;
}

/***********用户钱包部分**********/
.wrapper .user-pay{
    width: 95%;
    height: 22vw;
    background-color: #fff;

    border-radius: 20px;
    margin: 7vw auto 0; /* 设置顶部间距为7vw，其余方向自动居中 */
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wrapper .user-pay li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    user-select : none;
    cursor: pointer;
}
.wrapper .user-pay li p{
    font-size: 3vw;
    color: #0097EF;
    font-weight: 550;
    padding: 2vw;
}
.wrapper .user-pay li i{
    font-size: 6vw;
    color:#0097EF;
}
/********其他功能部分***********/
.wrapper .other-element{
    width: 95%;
    height: 26vw;
    background-color: #fff;

    border-radius: 25px;
    margin: 15px auto;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wrapper .other-element li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    user-select : none;
    cursor: pointer;
}
.wrapper .other-element li p{
    font-size: 3.5vw;
    color: #555;
    padding: 1vw;
    font-weight: 400;
}
.wrapper .other-element li i{
    font-size: 6vw;
    color: #555;
}
/*********互动玩乐部分**********/
.wrapper .play-element{
    width: 95%;
	margin: 0 auto;
	height: 50vw;

	/*此三个样式组合，可以保证背景图片充满整个容器*/
	/* 让整个图片自适应整个容器 */
	background-image: url(../assets/playElement.jpg);
	background-repeat: no-repeat;
	background-size: cover;

	box-sizing: border-box;
	/* 上下，左右 */
	padding: 2vw 6vw;

    border-radius: 20px;
}
</style>

